<template>
	<div class="mb20">
    <el-card shadow="never">
      <el-row :gutter="20">
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">本日赔款支出(万元)</h6>
            <div class="flex_c_c">20</div>
          </el-card>
        </el-col>
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 480px">
            <h6 class="title_2 flex_c_c">昨日赔款支出(万元)</h6>
            <div class="flex_c_c">2</div>
          </el-card>
        </el-col>
        <el-col :span="5" class="ml20">
          <el-card style="max-width: 580px">
            <h6 class="title_2 flex_c_c">去年今日赔款(万元)</h6>
            <div class="flex_c_c">12</div>
          </el-card>
        </el-col>
      </el-row>
      <div class="mt20">
        <div id="reparationsDailyPremium" style="width: 100%; height:400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="reparationsDailyPremium">
  import * as echarts from 'echarts';
  import { onMounted, onUnmounted, onUpdated, reactive, ref, toRefs } from 'vue';
  let myChart = ref(null)
  nextTick(() => {
    let chartDom = document.getElementById('reparationsDailyPremium');
    myChart.value = echarts.init(chartDom);
    let option;

    option = {
      title: {
        text: ''
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['20230101', '20230102', '20230103', '20230104', '20230105', '20230106', '20230107', '20230108', '20230109', '20230110', '20230111', '20230112', '20230113', '20230114', '20230115', '20230116', '20230117', '20230118', '20230119', '20230120', '20230121', '20230122', '20230123', '20230124', '20230125', '20230126', '20230127', '20230128', '20230129', '20230130', '20230131'],
        axisLabel: {
          rotate: 45
        },
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      series: [
        {
          name: '本日赔款支出',
          type: 'bar',
          data: [18, 35, 8, 36, 7, 13, 35, 40, 14, 24, 14, 11, 45, 17, 4, 29, 44, 36, 8, 30, 15, 33, 43, 55, 56, 13, 27, 51, 16, 43, 19]
        },
        {
          name: '去年今日赔款支出',
          type: 'bar',
          data: [12, 19, 46, 59, 21, 49, 43, 22, 58, 37, 24, 7, 33, 14, 18, 1, 42, 54, 25, 13, 27, 2, 32, 55, 28, 10, 1, 39, 42, 15, 23]
        }
      ]
    };
    option && myChart.value.setOption(option);

  })
</script>

<style lang="scss" scoped>

</style>